<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Css Grid</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/demoPage.css" />
		<link rel="stylesheet" type="text/css" href="css/board.css" />
		<script type="text/javascript" src="js/jquery-1.3.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
		<script>
			var currentXY = 00;
		</script>
		<style>
			#customwarsboard{
				cursor: pointer;
		}
		</style>
    </head>
    <body>
		<table id="customwarsboard" summary="An example playing field" cellpadding="0" cellspacing="0" >
			<colgroup>  
				<col id="col-key-first" />  
				<col id="col-key1" />  
				<col id="col-key2" />  
				<col id="col-key3" />  
				<col id="col-key4" />  
				<col id="col-key5" />  
				<col id="col-key6" />  
				<col id="col-key7" />  
				<col id="col-key8" />  
				<col id="col-key-last" />  
			</colgroup>  
	         
			<thead>  
				<tr>  
					<th scope="col" class="col" id="top-right"></th>  
					<th scope="col" class="col" id="top0">a</th>  
					<th scope="col" class="col" id="top1">b</th>  
					<th scope="col" class="col" id="top2">c</th>  
					<th scope="col" class="col" id="top3">d</th>  
					<th scope="col" class="col" id="top4">e</th>  
					<th scope="col" class="col" id="top5">f</th>  
					<th scope="col" class="col" id="top6">g</th>  
					<th scope="col" class="col" id="top7">h</th>  
					<th scope="col" class="col" id="top-left"></th>  
				</tr>  
			</thead>  

			<tfoot>  
				<tr>  
					<th scope="col" class="col" id="bottom-right"></th>  
					<th scope="col" class="col" id="foot0">a</th>  
					<th scope="col" class="col" id="foot1">b</th>  
					<th scope="col" class="col" id="foot2">c</th>  
					<th scope="col" class="col" id="foot3">d</th>  
					<th scope="col" class="col" id="foot4">e</th>  
					<th scope="col" class="col" id="foot5">f</th>  
					<th scope="col" class="col" id="foot6">g</th>  
					<th scope="col" class="col" id="foot7">h</th>  
					<th scope="col" class="col" id="bottom-left"></th>  
				</tr>  
			</tfoot>  

	
			<tbody>  
				<tr id="y7">  
					<th scope="row">8</th>    
					<td id="x0y7"><img src="img/plain.png" /></td>    
					<td id="x1y7"><img src="img/plain.png" /></td>    
					<td id="x2y7"><img src="img/plain.png" /></td>    
					<td id="x3y7"><img src="img/plain.png" /></td>    
					<td id="x4y7"><img src="img/plain.png" /></td>    
					<td id="x5y7"><img src="img/plain.png" /></td>    
					<td id="x6y7"><img src="img/trees.png" /></td>    
					<td id="x7y7"><img src="img/plain.png" /></td>    
					<th scope="row">8</th>    
				</tr>  
				<tr id="y6">  
					<th scope="row">7</th>    
					<td id="x0y6"><img src="img/plain.png" /></td>    
					<td id="x1y6"><img src="img/trees.png" /></td>    
					<td id="x2y6"><img src="img/plain.png" /></td>    
					<td id="x3y6"><img src="img/plain.png" /></td>    
					<td id="x4y6"><img src="img/plain.png" /></td>    
					<td id="x5y6"><img src="img/plain.png" /></td>    
					<td id="x6y6"><img src="img/plain.png" /></td>    
					<td id="x7y6"><img src="img/plain.png" /></td>    
					<th scope="row">7</th>    
				</tr>  
				<tr id="y5">  
					<th scope="row">6</th>    
					<td id="x0y5"><img src="img/trees.png" /></td>    
					<td id="x1y5"><img src="img/plain.png" /></td>    
					<td id="x2y5"><img src="img/plain.png" /></td>    
					<td id="x3y5"><img src="img/plain.png" /></td>    
					<td id="x4y5"><img src="img/plain.png" /></td>    
					<td id="x5y5"><img src="img/plain.png" /></td>    
					<td id="x6y5"><img src="img/plain.png" /></td>    
					<td id="x7y5"><img src="img/plain.png" /></td>    
					<th scope="row">6</th>    
				</tr>  
				<tr id="y4">  
					<th scope="row">5</th>    
					<td id="x0y4"><img src="img/plain.png" /></td>    
					<td id="x1y4"><img src="img/plain.png" /></td>    
					<td id="x2y4"><img src="img/plain.png" /></td>    
					<td id="x3y4"><img src="img/plain.png" /></td>    
					<td id="x4y4"><img src="img/plain.png" /></td>    
					<td id="x5y4"><img src="img/plain.png" /></td>    
					<td id="x6y4"><img src="img/plain.png" /></td>    
					<td id="x7y4"><img src="img/plain.png" /></td>    
					<th scope="row">5</th>    
				</tr>  
				<tr id="y3">  
					<th scope="row">4</th>    
					<td id="x0y3"><img src="img/plain.png" /></td>    
					<td id="x1y3"><img src="img/trees.png" /></td>    
					<td id="x2y3"><img src="img/plain.png" /></td>    
					<td id="x3y3"><img src="img/plain.png" /></td>    
					<td id="x4y3"><img src="img/plain.png" /></td>    
					<td id="x5y3"><img src="img/plain.png" /></td>    
					<td id="x6y3"><img src="img/plain.png" /></td>    
					<td id="x7y3"><img src="img/plain.png" /></td>    
					<th scope="row">4</th>    
				</tr>  
				<tr id="y2">  
					<th scope="row">3</th>    
					<td id="x0y2"><img src="img/plain.png" /></td>    
					<td id="x1y2"><img src="img/plain.png" /></td>    
					<td id="x2y2"><img src="img/plain.png" /></td>    
					<td id="x3y2"><img src="img/plain.png" /></td>    
					<td id="x4y2"><img src="img/plain.png" /></td>    
					<td id="x5y2"><img src="img/plain.png" /></td>    
					<td id="x6y2"><img src="img/plain.png" /></td>    
					<td id="x7y2"><img src="img/plain.png" /></td>    
					<th scope="row">3</th>    
				</tr>  
				<tr id="y1">  
					<th scope="row">2</th>    
					<td id="x0y1"><img src="img/plain.png" /></td>    
					<td id="x1y1"><img src="img/plain.png" /></td>    
					<td id="x2y1"><img src="img/trees.png" /></td>    
					<td id="x3y1"><img src="img/trees.png" /></td>    
					<td id="x4y1"><img src="img/plain.png" /></td>    
					<td id="x5y1"><img src="img/plain.png" /></td>    
					<td id="x6y1"><img src="img/plain.png" /></td>    
					<td id="x7y1"><img src="img/plain.png" /></td>    
					<th scope="row">2</th>    
				</tr>  
				<tr id="y0">  
					<th scope="row">1</th>    
					<td id="x0y0"><img src="img/plain.png" /></td>    
					<td id="x1y0"><img src="img/plain.png" /></td>    
					<td id="x2y0"><img src="img/plain.png" /></td>    
					<td id="x3y0"><img src="img/plain.png" /></td>    
					<td id="x4y0"><img src="img/plain.png" /></td>    
					<td id="x5y0"><img src="img/plain.png" /></td>    
					<td id="x6y0"><img src="img/plain.png" /></td>    
					<td id="x7y0"><img src="img/plain.png" /></td>    
					<th scope="row">1</th>
				</tr>  
	        </tbody>     
 	</table>
	<div id="messages">
		<p></p>
	</div>
	</body>
</html>
